<template>
  <div>
    <Box>
      <h2 style="margin: 10px 15px" slot="title">化解信息</h2>
      <div slot="box">
        <div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="化解时限" required prop="defuseDate">
              <a-date-picker v-model="form.defuseDate" @change="onChange1" />
            </a-form-model-item>
            <a-form-model-item label="化解方式" prop="defuseMode">
<!--              <a-select v-model="form.defuseMode">-->
<!--                <a-select-option v-for="item of this.filterMultiDictText('defuse_mode','')" :value="item.value" :key="item">-->
<!--                  {{item.text}}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
              <a-select v-model="form.defuseMode" placeholder="请选择">
                <a-select-opt-group label="调解">
                  <a-select-option value="0101">
                    {{ this.filterMultiDictText1('defuse_mode','0101') }}
                  </a-select-option>
                  <a-select-option value="0102">
                    {{ this.filterMultiDictText1('defuse_mode','0102') }}
                  </a-select-option>
                  <a-select-option value="0103">
                    {{ this.filterMultiDictText1('defuse_mode','0103') }}
                  </a-select-option>
                  <a-select-option value="0104">
                    {{ this.filterMultiDictText1('defuse_mode','0104') }}
                  </a-select-option>
                  <a-select-option value="0105">
                    {{ this.filterMultiDictText1('defuse_mode','0105') }}
                  </a-select-option>
                  <a-select-option value="0106">
                    {{ this.filterMultiDictText1('defuse_mode','0106') }}
                  </a-select-option>
                  <a-select-option value="0107">
                    {{ this.filterMultiDictText1('defuse_mode','0107') }}
                  </a-select-option>
                  <a-select-option value="0199">
                    {{ this.filterMultiDictText1('defuse_mode','0199') }}
                  </a-select-option>
                </a-select-opt-group>
                <a-select-opt-group label="仲裁">
                  <a-select-option value="0201">
                    {{ this.filterMultiDictText1('defuse_mode','0201') }}
                  </a-select-option>
                  <a-select-option value="0202">
                    {{ this.filterMultiDictText1('defuse_mode','0202') }}
                  </a-select-option>
                  <a-select-option value="0203">
                    {{ this.filterMultiDictText1('defuse_mode','0203') }}
                  </a-select-option>
                  <a-select-option value="0204">
                    {{ this.filterMultiDictText1('defuse_mode','0204') }}
                  </a-select-option>
                </a-select-opt-group>
                <a-select-option value="03">
                  {{ this.filterMultiDictText1('defuse_mode','03') }}
                </a-select-option>
                <a-select-option value="04">
                  {{ this.filterMultiDictText1('defuse_mode','04') }}
                </a-select-option>
                <a-select-option value="05">
                  {{ this.filterMultiDictText1('defuse_mode','05') }}
                </a-select-option>
                <a-select-option value="06">
                  {{ this.filterMultiDictText1('defuse_mode','06') }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item ref="name" label="化解组织" prop="defuseOrganization">
              <a-input v-model="form.defuseOrganization" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item ref="name" label="化解责任人姓名" prop="personLiable">
              <a-input v-model="form.personLiable" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item ref="name" label="化解责任人联系方式" prop="contactInformation">
              <a-input v-model="form.contactInformation" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item label="化解时间" required prop="resolutionTime">
              <a-date-picker v-model="form.resolutionTime" @change="onChange2" />
            </a-form-model-item>
            <a-form-model-item ref="name" label="是否化解成功" prop="defuseSuccess">
              <a-switch default-checked @change="onChange5" v-model="form.defuseSuccess">
                <a-icon slot="checkedChildren" type="check" />
                <a-icon slot="unCheckedChildren" type="close" />
              </a-switch>
            </a-form-model-item>

            <a-form-model-item label="化解情况" prop="defuseSituation">
              <a-input v-model="form.defuseSituation" type="textarea" placeholder="至少输入五个字符"/>
            </a-form-model-item>



            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="display: flex">
              <a-button type="primary" @click="onSubmit">
                提交
              </a-button>
              <a-button style="margin-left: 10px;" @click="resetForm">
                取消
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </Box>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'
import { editResolveInformation, updataHJ } from '@api/xlgc/lawCase'
import Input from '@/views/xlgc/lawCase/LifeCase/detailed/ImportModal'
import { stateTypr } from '@api/xlgc/plan'
export default {
  name: 'basic',
  components:{Input,Box},
  props:{
    basics:Number
  },
  data() {
    return {
      c:0,
      visible:false,
      fileList:[],
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      other: '',
      form: {
        contactInformation: undefined,
        defuseDate: undefined,
        defuseMode: undefined,
        defuseOrganization: undefined,
        defuseSituation: undefined,
        defuseSuccess: "1",
        personLiable: undefined,
        resolutionTime: undefined,
        id:undefined
      },
      rules: {
        defuseDate: [{ required: true, message: '请选择化解时限', trigger: 'blur' }],
        defuseMode: [{ required: true, message: '请选择化解方式', trigger: 'change' }],
        defuseOrganization: [{ required: true, message: '请输入化解组织', trigger: 'change' }],
        personLiable: [{ required: true, message: '请输入化解责任人', trigger: 'change' }],
        contactInformation: [{ required: true, message: '请输入化解责任人联系方式', trigger: 'change' }],
        defuseSuccess: [{ required: true, message: '', trigger: 'change' }],
        resolutionTime: [{ required: true, message: '请选择化解时间', trigger: 'change' }],
        defuseSituation	: [
          { required: true, message: '请输入化解情况', trigger: 'blur' },
          { min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ],
        peopleInvolvedNumber:[
          { required: true, message: '请输入涉及人数', trigger: 'change' }
        ]
      },
      dateFormat: 'YYYY-MM-DD',
      passCheck:false
    };
  },
  mounted() {
    console.log(this.$route.query.item)
    if(this.$route.query.text === 'false'){
      // alert(this.$route.query.text)
      this.form = this.$route.query.item
      // if(this.form.defuseSuccess === '1')
      this.form.defuseSuccess = this.form.defuseSuccess === '1'
      console.log(this.form)
      // this.form.defuseSuccess = this.form.defuseSuccess === 1
      // alert(this.form.defuseSuccess)
      // this.form.contactInformation = this.$route.query.item.contactInformation
      // this.form.defuseDate = this.$route.query.item.defuseDate
      // this.form.defuseMode = this.$route.query.item.defuseMode
      // this.form.defuseOrganization = this.$route.query.item.defuseOrganization
      // this.form.defuseSituation = this.$route.query.item.defuseSituation
      // this.form.personLiable = this.$route.query.item.personLiable
      // this.form.resolutionTime = this.$route.query.item.resolutionTime
      // this.form.id = this.$route.query.item.id
      // this.refreshTable1(Object.assign({},this.form,{disputesId:this.$route.query.id}))
    }
  },
  methods: {
    onChange5(checked) {
      checked ? this.form.defuseSuccess = 1 : this.form.defuseSuccess = 0
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        this.passCheck = valid
        this.$emit('passCheck',valid)
      });
    },
    onSubmit(){
      this.submitForm()
      if(!this.passCheck){
        this.$message.error('请正确填写化解信息')
      }else{
        if(this.$route.query.text  === 'false'){
          this.refreshTable(Object.assign({},this.form))
        }else{
          this.refreshTable(Object.assign({},this.form,{disputesId:this.$route.query.id}))
        }

      }


    },
    refreshTable(val) {
      if(this.$route.query.text  === 'false'){
        editResolveInformation(val)
          .then(res => {
            console.log(res)
            if(res.success){
              this.$message.success(res.message, 2,);
              this.$router.go(-1)
            }else{
              this.$message.error('修改失败，请仔细核对');
            }
          })
          .catch(e => {
            this.$message.warn('请求失败！')
          })
      }else{
        updataHJ(val)
          .then(res => {
            console.log(res)
            if(res.message == '添加成功'){
              this.$message.success(res.message, 2,);
              this.$router.go(-1)
            }else{
              this.$message.error('添加失败，请仔细核对后再次添加');
            }
          })
          .catch(e => {
            this.$message.warn('请求失败！')
          })

      }

    },
    refreshTable1(val) {

    },
    onChange(val){
      console.log(val)
    },
    inputse(val){
      let arr = []
      arr.push(val)
      this.$emit('fileListse',arr)
    },
    showModal(val) {
      this.visible = true;
    },
    handleOk() {
      this.$refs.inpute.handleOk()
    },
    onChange1(date, dateString) {
      console.log(date, dateString);
      this.form.defuseDate = dateString
    },
    onChange2(date, dateString) {
      console.log(date, dateString);
      this.form.resolutionTime = dateString
    },
    onChange3(date, dateString) {
      console.log(date, dateString);
      this.form.terminationDate = dateString
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    resetForm() {
      // this.$refs.ruleForm.resetFields();
      this.$router.back()
    },
    // filterMultiDictText(dictCode, text) {
    //   console.log(dictCode,text)
    //   if (!text && text !== 0) return
    //   let datas = getDictItemsFromCache(dictCode)
    //   // return this.$filterMultiDictText(datas, text)
    //   return this.$filterDictText(datas, text)
    // },
    filterMultiDictText1(dictCode, text) {
      console.log(dictCode,text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    filterMultiDictText(dictCode, text) {
      // console.log(dictCode,text)
      // if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // console.log(this.$filterDictText(datas, text))
      // return this.$filterMultiDictText(datas, text)
      // return this.$filterDictText(datas, text)
      console.log(datas)
      return datas
    }

  },
  watch:{
    form:{
      deep:true,
      handler(a,b){
        console.log(this.form)
        this.$emit('basicses',this.form)
      }
    }
  }
}
</script>

<style scoped>
.Filst{
  display: flex;

}
/deep/.Filst .ant-form-item-label{
  width: 100%;
}
/deep/.Filst .ant-form-item-label{
  width: 100%;
}
/deep/.Filst .ant-form-item{
  display: flex;
  margin-right: 20px;
}
</style>